<template>
  <div class="tab-full-page" ref="rentControlIndexPage">
    <a-row
      class="rent-control hide-scroller-bar"
      :gutter="[16, 16]"
      style="margin-left: 0"
    >
      <a-col :span="24" class="total-info">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__pulse"
        >
          <NumTotal />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <TransactionTrend />
        </transition>
      </a-col>
      <a-col
        :xs="24"
        :sm="6"
        class="col-box"
        :style="$store.getters.dataVMobile ? '' : colStyle"
      >
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <VacantRank />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <ExpireDistribution />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <CollectionRate />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <LeaseRateTrend />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <VacantRate />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <BenefitsLoss />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <CollectionTrend />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <LeaseAnalysis />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <LeaseAreaPerference />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <AveragePriceTrend />
        </transition>
      </a-col>
      <a-col
        :xs="24"
        :sm="6"
        class="col-box"
        :style="$store.getters.dataVMobile ? '' : colStyle"
      >
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <LeaseTrend />
        </transition>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import store from "../../../../store/index";
import NumTotal from "./NumTotal.vue";
import TransactionTrend from "./TransactionTrend.vue";
import VacantRank from "./VacantRank.vue";
import ExpireDistribution from "./ExpireDistribution.vue";
import LeaseTrend from "./LeaseTrend.vue";
import CollectionRate from "./CollectionRate.vue";
import LeaseRateTrend from "./LeaseRateTrend.vue";
import VacantRate from "./VacantRate.vue";
import BenefitsLoss from "./BenefitsLoss.vue";
import CollectionTrend from "./CollectionTrend.vue";
import LeaseAreaPerference from "./LeaseAreaPerference.vue";
import LeaseAnalysis from "./LeaseAnalysis.vue";
import AveragePriceTrend from "./AveragePriceTrend.vue";

export default defineComponent({
  name: "RentControl",
  components: {
    NumTotal,
    TransactionTrend,
    VacantRank,
    ExpireDistribution,
    LeaseTrend,
    CollectionRate,
    LeaseRateTrend,
    VacantRate,
    BenefitsLoss,
    CollectionTrend,
    LeaseAreaPerference,
    LeaseAnalysis,
    AveragePriceTrend,
  },
  setup() {
    const state = reactive({
      rentControlIndexPage: null,
      pageHeight: 900,
      rowHeight: 300,
      rowNum: 3, // 均分的行数
      totalRowNum: 4,
      rowGap: 16,
    });

    const colStyle = computed(() => `height:${state.rowHeight}px;`);

    watch(
      () => store.getters.resizeTrigger,
      () => {
        getPageHeight();
      }
    );

    const getPageHeight = () => {
      state.pageHeight = state.rentControlIndexPage.offsetHeight;
      state.rowHeight = Math.floor(
        (state.pageHeight - state.pageHeight * 0.1) / state.rowNum -
          state.rowGap
      );
    };

    onMounted(() => {
      getPageHeight();
    });

    return {
      colStyle,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.rent-control {
  height: 100%;
  overflow: hidden auto;
  .total-info {
    height: 10%;
    min-height: 80px;
  }
  .col-box {
    min-height: 200px;
  }
}
</style>
